<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<head th:include="admin/common/resource ::commonHead('首页')" ></head>
    <body  style="margin: 0px;padding: 0px" >
        <div class="container-fluid">
            <div class="toolbar btn-group-sm" role="toolbar" >
                <h6 style="margin-top: 10px;margin-bottom: 20px" > 后台管理系统 / 角色管理 / 角色列表 </h6>
                <div style="margin-bottom: 10px;" >
                    <button shiro:hasPermission="role:add" onclick="loadPage('/admin/role/add')" type="button" class="btn btn-sm btn-success"> 添加角色 </button>
                    <button type="button" class="btn btn-sm btn-primary"> 导出 </button>
                </div>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th scope="col"> ID </th>
                    <th scope="col"> 角色名 </th>
                    <th scope="col"> 角色描述 </th>
                    <th scope="col"> 状态 </th>
                    <th scope="col"> 操作 </th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="role:${pager.list}" >
                    <th scope="row" th:text="${role.id}" ></th>
                    <td th:text="${role.roleName}"></td>
                    <td th:text="${role.description}" ></td>
                    <td th:text="${role.status} == 1?'正常':'异常'"></td>
                    <td>
                        <a style="color: darkgray" th:if="${role.id} ==1 " class="btn-outline-default" href="javascript:void(0);" >分配权限</a>
                        <a th:if="${role.id} > 1" shiro:hasPermission="perms:list" href="javascript:void(0);" class="btn-outline-primary" th:onclick="|perms(${role.id})|">分配权限</a>
                        <a shiro:hasPermission="role:edit" class="btn-outline-primary" th:href="@{'/admin/role/edit?id='+${role.id}}">编辑</a>
                        <a style="color: darkgray"  th:if="${role.id} ==1 " class="btn-outline-default" href="javascript:void(0);" >删除</a>
                        <a th:if="${role.id} > 1" shiro:hasPermission="role:delete" class="btn-outline-danger" th:href="@{'javascript:destroy('+${role.id}+')'}">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <!-- 分页 -->
            <div th:replace="admin/common/pager ::page_pager(${pager.currentPage},0,${pager.totalPage}, @{/admin/role/list})"></div>
        </div>
    </body>
<div th:include="admin/common/resource ::footerJs"></div>
<script th:src="@{/layui/layui.all.js}"></script>
<script>

    function perms(id) {
        layer.open({
            title:'权限列表',
            type: 2,
            closeBtn: 2,
            shift: 1,
            area: ['480px', '720px'],
            shadeClose: true,
            content: '/admin/perms/list?roleId='+id,
            btn:['确定','取消'],
            yes:function (index, layero) {
              var wind = window["layui-layer-iframe" + index];
              var checked = wind.submit();
              $.post('/admin/perms/save',{
                  roleId:id,
                  ids:JSON.stringify(checked)
              },function (result) {
                   layer.msg("操作成功",function () {
                       layer.close(index)
                   },2000)
              })
            }
        });
    }

    function destroy(id){
        layer.confirm('真的删除这个角色吗?', function(index){
            layer.close(index);
            //向服务端发送删除指令
            $.ajax({
                type:'delete',
                url: "/admin/role/delete",
                data: {
                    id: id
                },
                success: function (data) {
                    if(data.code == 1){
                        layer.msg("成功",function () {
                            window.location.reload();
                        },2000)
                    }else{
                        layer.msg("失败")
                    }
                }
            })
        });
    }
</script>
</html>
